<template>
  <div v-show="item.isShow" class="f as pt10 pb10">
    <div
      :class="['nowrap mr10 tr', item.required ? 'need' : '']"
      :style="{
        width: item.isLabelWidth ? item.labelWidth + 'px' : 'auto',
      }"
    >
      {{item.label}}
    </div>
    <div :class="['f1 rel', item.errmsg ? 'error' : '']">
      <div class="f ac xe">
        <!-- <div class="f1">{{item.label}}</div> -->
        <div v-if="!item.disabled" class="f ac">
          <svg @click="addItem" t="1691735673170" class="poi" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3649" width="14" height="14"><path d="M426.666667 426.666667H85.546667A85.418667 85.418667 0 0 0 0 512c0 47.445333 38.314667 85.333333 85.546667 85.333333H426.666667v341.12c0 47.274667 38.186667 85.546667 85.333333 85.546667 47.445333 0 85.333333-38.314667 85.333333-85.546667V597.333333h341.12A85.418667 85.418667 0 0 0 1024 512c0-47.445333-38.314667-85.333333-85.546667-85.333333H597.333333V85.546667A85.418667 85.418667 0 0 0 512 0c-47.445333 0-85.333333 38.314667-85.333333 85.546667V426.666667z" fill="#666666" p-id="3650"></path></svg>
          <svg v-if="tableData.length" @click="delAll" t="1691549378623" class="ml20 poi" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2516" width="20" height="20"><path d="M736 352.032L736.096 800h-0.128L288 799.968 288.032 352 736 352.032zM384 224h256v64h-256V224z m448 64h-128V202.624C704 182.048 687.232 160 640.16 160h-256.32C336.768 160 320 182.048 320 202.624V288H192a32 32 0 1 0 0 64h32V799.968C224 835.296 252.704 864 288.032 864h447.936A64.064 64.064 0 0 0 800 799.968V352h32a32 32 0 1 0 0-64z" fill="#4C4B4C" p-id="2517"></path><path d="M608 690.56a32 32 0 0 0 32-32V448a32 32 0 1 0-64 0v210.56a32 32 0 0 0 32 32M416 690.56a32 32 0 0 0 32-32V448a32 32 0 1 0-64 0v210.56a32 32 0 0 0 32 32" fill="#4C4B4C" p-id="2518"></path></svg>
        </div>
      </div>
      <div class="pt5">
        <Table
          :columns="tableHead"
          border
          :data="tableData"
        >
          <template slot-scope="{row}" slot="name">
            <Input :value="row.name" @on-change="e => changeForm(e, 'name', row)" placeholder="请输入药物名称" :disabled="item.disabled" />
          </template>
          <template slot-scope="{row}" slot="useage">
            <div class="f">
              <Select :value="row.useage" @on-change="e => changeForm(e, 'useage', row)" style="width:80px" transfer :disabled="item.disabled">
                <Option v-for="optItem in useageList" :value="optItem.id" :key="optItem.id">{{ optItem.name }}</Option>
              </Select>
              <Input :value="row.useageOther" @on-change="e => changeForm(e, 'useageOther', row)" :disabled="row.useage!='0' || item.disabled" />
            </div>
          </template>
          <template slot-scope="{row}" slot="dosage">
            <div class="f ac">
              <Select :value="row.frequency" @on-change="e => changeForm(e, 'frequency', row)" style="width:80px" transfer :disabled="item.disabled">
                <Option v-for="optItem in frequencyList" :value="optItem.id" :key="optItem.id">{{ optItem.name }}</Option>
              </Select>
              <Input :value="row.frequencyOther" @on-change="e => changeForm(e, 'frequencyOther', row)" style="width:60px;" :disabled="item.disabled || row.frequency!='0'" />
              <div class="pl5 pr5">每次</div>
              <Input :value="row.dosage" @on-change="e => changeForm(e, 'dosage', row)" style="width:40px;" :disabled="item.disabled" />
              <Select :value="row.dosageUnit" @on-change="e => changeForm(e, 'dosageUnit', row)" style="width:80px" transfer :disabled="item.disabled">
                <Option v-for="optItem in dosageUnitList" :value="optItem.id" :key="optItem.id">{{ optItem.name }}</Option>
              </Select>
              <Input :value="row.dosageUniteOther" @on-change="e => changeForm(e, 'dosageUniteOther', row)" style="width:50px;" :disabled="item.disabled || row.dosageUnit!='0'" />
            </div>
          </template>
          <template slot-scope="{row}" slot="time">
            <div class="f">
              <Input :value="row.time" @on-change="e => changeForm(e, 'time', row)" style="width:40px;" :disabled="item.disabled" />
              <Select :value="row.timeUnit" @on-change="e => changeForm(e, 'timeUnit', row)" style="width:80px" transfer :disabled="item.disabled">
                <Option v-for="optItem in timeUnitList" :key="optItem.id" :value="'1'">{{optItem.name}}</Option>
              </Select>
            </div>
          </template>
          <template slot-scope="{row}" slot="action">
            <div :class="['f ac xc']">
              <div v-if="!item.disabled" @click="delMedicine(row)" class="poi gred hoverText rel textUnderline">删除</div>
            </div>
          </template>
        </Table>
      </div>
    </div>
  </div>
</template>
<script src='./index.js'></script>
<style src='./index.css' scoped>
</style>